<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>航班查询页面</title>
</head>
<body>
<div id="search" style="text-align: center;">
    <h1>航班查询页面</h1>
    起飞城市：<select id="departureCity"></select>&nbsp;——&nbsp;到达城市：<select id="arrivalCity"></select>
    <input type="button" value="查询" id="searchBtn"/>&nbsp;
    <input type="button" value="添加航班" onclick="location='addFlight.html'"/>
</div>
<div id="show" style="text-align: center;"></div>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
    $(function () {
        $.ajax({
            url: "flight/showCity",
            type: "post",
            data: "",
            dataType: "json",
            success: function (data) {
                var opt1 = "<option value='0' checked>--请选择起飞城市--</option>";
                var opt2 = "<option value='0' checked>--请选择到达城市--</option>";
                $.each(data, function () {
                    opt1 += "<option value='" + this.id + "'>" + this.cityName + "</option>";
                    opt2 += "<option value='" + this.id + "'>" + this.cityName + "</option>";
                });
                $("#departureCity").html(opt1);
                $("#arrivalCity").html(opt2);
            }
        });
        $("#searchBtn").click(function () {
            var did = $("#departureCity").val();
            var aid = $("#arrivalCity").val();
            if (did == 0) {
                alert("请选择起飞城市！");
                return;
            }
            if (aid == 0) {
                alert("请选择到达城市！");
                return;
            }
            if (did == aid) {
                alert("起飞城市和到达城市不能相同！");
                return;
            }
            $.ajax({
                url: "flight/showFlight",
                type: "post",
                data: {"did": did, "aid": aid},
                dataType: "json",
                success: function (data) {
                    var show = "";
                    if (data.length > 0) {
                        show += "<h2>帮您查找到以下航班</h2>" +
                            "<table align=\"center\" width=\"80%\">" +
                            "<tr style='background-color: aqua'>" +
                            "<th>航班编号</th>" +
                            "<th>起飞城市</th>" +
                            "<th>起飞时间</th>" +
                            "<th>到达城市</th>" +
                            "<th>到达时间</th>" +
                            "</tr>";
                        $.each(data, function (i) {
                            show += ((i % 2 == 0) ? "<tr>" : "<tr style='background-color:chartreuse'>") +
                                "      <td>" + this.flightNo + "</td>" +
                                "      <td>" + this.depCity + "</td>" +
                                "      <td>" + this.departureTime + "</td>" +
                                "      <td>" + this.arrCity + "</td>" +
                                "      <td>" + this.arrivalTime + "</td>" +
                                "   </tr>";
                        });
                        show += "</table>";
                    } else {
                        show += "<h3>没找到符合条件的航班，请改变查询条件重试！</h3>";
                    }
                    $("#show").html(show);
                }
            });

        });
    });

</script>
</body>
</html>